<template>
    <div>
        <div class="feed-toggle">
            <ul class="nav nav-pills outline-active">
                <template v-if="componentname==='home'">
                    <li v-if="user" class="nav-item">
                        <nuxt-link class="nav-link" :class="{
                    active: tab === 'your_feed',
                  }" exact :to="{
                    name: 'home',
                    query: {
                      tab: 'your_feed',
                    },
                  }">Your Feed</nuxt-link>
                    </li>
                    <li class="nav-item">
                        <nuxt-link class="nav-link" :class="{
                    active: tab === 'global_feed',
                  }" exact :to="{
                    name: 'home',
                  }">Global Feed</nuxt-link>
                    </li>
                    <li v-if="tag" class="nav-item">
                        <nuxt-link class="nav-link" :class="{
                    active: tab === 'tag',
                  }" exact :to="{
                    name: 'home',
                    query: {
                      tab: 'tag',
                      tag: tag,
                    },
                  }"># {{ tag }}</nuxt-link>
                    </li>
                </template>
                <template v-else>
                    <li class="nav-item">
                        <nuxt-link class="nav-link" :class="{
                    active: tab === 'my_articles',
                  }" exact :to="{
                    name: 'profile',
                  }">My Articles</nuxt-link>
                    </li>
                    <li class="nav-item">
                        <nuxt-link class="nav-link" :class="{
                    active: tab === 'favorited_articles',
                  }" exact :to="{
                    name: 'profile',
                    query: {
                      tab: 'favorited_articles',
                    }
                  }">Favorited Articles</nuxt-link>
                    </li>
                </template>
            </ul>
        </div>

        <div v-for="article in articles" :key="article.slug" class="article-preview">
            <div class="article-meta">
                <nuxt-link :to="{
                  name: 'profile',
                  params: {
                    username: article.author.username,
                  },
                }">
                    <img :src="article.author.image" />
                </nuxt-link>
                <div class="info">
                    <nuxt-link class="author" :to="{
                    name: 'profile',
                    params: {
                      username: article.author.username,
                    },
                  }">
                        {{ article.author.username }}
                    </nuxt-link>
                    <span class="date">{{
                  article.createdAt | date("MMM DD, YYYY")
                }}</span>
                </div>
                <button v-if="user" class="btn btn-outline-primary btn-sm pull-xs-right" :class="{
                  active: article.favorited,
                }" @click="onFavorite(article)" :disabled="article.favoriteDisabled">
                    <i class="ion-heart"></i> {{ article.favoritesCount }}
                </button>
            </div>
            <nuxt-link class="preview-link" :to="{
                name: 'article',
                params: {
                  slug: article.slug,
                },
              }">
                <h1>{{ article.title }}</h1>
                <p>{{ article.description }}</p>
                <span>Read more...</span>
                <ul class="tag-list">
   <li v-for="tag in article.tagList" class="tag-default tag-pill tag-outline ng-binding ng-scope" >
        {{tag}}
      </li>
    </ul>
            </nuxt-link>
        </div>

        <!-- 分页列表 -->
        <nav>
            <ul class="pagination">
                <li class="page-item" :class="{
                  active: item === page,
                }" v-for="item in totalPage" :key="item">
                    <nuxt-link class="page-link" :to="{
                    name: 'home',
                    query: {
                      page: item,
                      tag: $route.query.tag,
                      tab: tab,
                    },
                  }">{{ item }}</nuxt-link>
                </li>
            </ul>
        </nav>
        <!-- /分页列表 -->
    </div>

</template>

<script>
import { addFavorite, deleteFavorite } from '@/api/article'
import { mapState } from 'vuex'

export default {
    name: 'ArticleList',
    props: {
        articles: {
            type: Array,
        },
        page: {
            type: Number,
        },
        tab: {
            type: String
        },
        tag: {
            type: String
        },
        totalPage: {
            type: Number,
        },
        componentname: {
            type: String
        }
    },

    computed: {
        ...mapState(['user'])
    },
  watchQuery: ["page", "tag", "tab"],

    methods: {
        async onFavorite(article) {
            article.favoriteDisabled = true
            if (article.favorited) {
                // 取消点赞
                await deleteFavorite(article.slug)
                article.favorited = false
                article.favoritesCount += -1
            } else {
                // 添加点赞
                await addFavorite(article.slug)
                article.favorited = true
                article.favoritesCount += 1
            }
            article.favoriteDisabled = false
        }
    }
}
</script>

<style>
</style>
